<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">类型：</label>
                                    <div class="layui-input-inline">
                                        <select name="processLineType" id="queryProcessLineType"></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="code" class="layui-input" type="text" placeholder="请输入编码"
                                               autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">名称：</label>
                                    <div class="layui-input-inline">
                                        <input name="name" class="layui-input" type="text" placeholder="请输入名称"
                                               autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit layui-form-keyDownSearch="true">查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                                    </button>
                                </div>
                            </div>
                            <div class="query-rt">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="processLineTemplateBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="processLineTemplateTable" lay-filter="processLineTemplateTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="processLineTemplateTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="process">工序管理</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="processLineTemplateForm">
    <form lay-filter="processLineTemplateForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="processLineType" id="processLineType"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">编码</label>
            <div class="layui-input-block">
                <input name="code" placeholder="请输入工艺线路编码" type="text" class="layui-input"
                       lay-verify="required" required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入工艺线路名称" type="text" class="layui-input"
                       lay-verify="required" required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="sort" placeholder="请输入排序" type="text" class="layui-input" lay-verify="required"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status" id="status"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" placeholder="请输入备注" class="layui-textarea" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="processLineTemplateFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- 工序管理 -->
<script type="text/html" id="processForm">
    <div class="open-form">
        <div class="open-model">
            <div class="open-auto">
                <!-- 头部操作栏 -->
                <div class="layui-form lay-header">
                    <div class="toolbar">
                        <div class="layui-form-item lay-query-content">
                            <div class="lay-query-box">
                                <div class="query-lt">
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">工序类型：</label>
                                        <div class="layui-input-inline">
                                            <select id="processType" name="processType" lay-filter="processType"
                                                    class="common-select-search">
                                            </select>
                                        </div>
                                    </div>
<!--                                    <div class="layui-inline">-->
<!--                                        <label class="layui-form-label w-auto">工序性质：</label>-->
<!--                                        <div class="layui-input-inline">-->
<!--                                            <select id="processNature" name="processNature" lay-filter="processNature"-->
<!--                                                    class="common-select-search">-->
<!--                                            </select>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">节点名称：</label>
                                        <div class="layui-input-inline">
                                            <input name="processName" class="layui-input" type="text"
                                                   placeholder="请输入节点名称"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">节点编码：</label>
                                        <div class="layui-input-inline">
                                            <input name="processCode" class="layui-input" type="text"
                                                   placeholder="请输入节点编码"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button class="layui-btn icon-btn color-green" lay-filter="processSearchBtn"
                                                lay-submit>查询
                                        </button>
                                        <button class="layui-btn icon-btn color-white" lay-filter="processResets"
                                                lay-submit>重置
                                        </button>
                                    </div>
                                </div>
                                <div class="query-rt"></div>
                            </div>
                        </div>
                    </div>
                    <div class="lay-btn-rows">
                        <div class="lay-btn-box">
                            <div class="lay-btn-lt">
                                <button class="layui-btn color-green" type="button" id="addProcessTemplate">添加工序
                                </button>
                            </div>
                            <div class="lay-btn-lt">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 表格 -->
                <table class="layui-table" id="processTable" lay-filter="processTable"></table>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </div>
    </div>
</script>

<!-- 工艺线路模板详细 -->
<script type="text/html" id="processLineTemplateRecordForm">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 表格 -->
                <table class="layui-table" id="processLineTemplateRecordTable"
                       lay-filter="processLineTemplateRecordTable"></table>
            </div>
        </div>
    </div>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;

        let templateId = "";

        let processOp = "";

        //工艺线路类型
        admin.getDictList("queryProcessLineType", "process_line_type", null, "工艺线路类型");

        // 渲染表格
        var insTb = table.render({
            elem: '#processLineTemplateTable',
            url: config.base + 'enterprise/product/admin/processLineTemplate/list',
            limit: 5,
            limits: [5, 10, 20, 30, 40, 50, 60, 70, 80],
            toolbar: true,
            defaultToolbar: ["filter"],
            page: true,
            cellMinWidth: 100,
            cols: [[
                {field: 'code', align: 'center', title: '工艺线路代码'}
                , {field: 'processLineTypeName', align: 'center', title: '工艺线路类型'}
                , {field: 'name', align: 'center', title: '工艺线路名称'}
                , {field: 'processTotal', align: 'center', title: '工序数'}
                , {field: 'statusName', align: 'center', title: '状态'}
                , {field: 'remark', align: 'center', title: '描述'}
                , {field: 'createTime', align: 'center', title: '创建时间'}
                , {align: 'center', toolbar: '#processLineTemplateTableBar', title: '操作', width: 300, fixed: 'right'}
            ]]
        });

        // 工具条点击事件
        table.on('tool(processLineTemplateTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'process') { //工序管理
                showProcessModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            } else if (obj.event === 'detail') { //详情
                showDetailModel(data);
            }
        });

        //监听排序
        table.on('sort(processLineTemplateTable)', function (obj) {
            table.reload('processLineTemplateTable', {
                initSort: obj,
                where: {
                    sort: obj.field,
                    order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}}, 'data');
        });

        // 重置搜索
        form.on('submit(resets)', data => {
            insTb.reload({where: admin.resetSearch(data.field), page: {curr: 1}}, 'data');
        });

        form.on('switch(isDeleted)', function (obj) {
            if (obj.elem.checked) {
                enable(obj.value)
            } else {
                disable(obj.value)
            }
        })

        function enable(id) {
            admin.req('enterprise/product/admin/processLineTemplate/enable', {id: id}, function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('processLineTemplateTable');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
        }

        function disable(id) {
            admin.req('enterprise/product/admin/processLineTemplate/disable', {id: id}, function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('processLineTemplateTable');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
        }

        // 添加按钮点击事件
        $('#processLineTemplateBtnAdd').click(function () {
            showEditModel();
        });

        $('#processLineTemplateBtnDel').click(function () {
            var checkRows = table.checkStatus('processLineTemplateTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要删除的数据', {icon: 2});
            } else {
                var ids = '';
                checkRows.data.forEach(item => {
                    ids += item.id + ','
                })
                layer.confirm('确定要删除吗？', {
                    offset: '65px',
                    skin: 'layui-layer-admin'
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    delBatch(ids)
                });
            }
        });

        function delBatch(ids) {
            admin.req('enterprise/product/admin/processLineTemplate/delBatch', {ids: ids}, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('processLineTemplateTable');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
        }

        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: '660px',
                title: data ? '修改工艺线路模板' : '添加工艺线路模板',
                content: $('#processLineTemplateForm').html(),
                success: function () {
                    //工艺线路类型
                    admin.getDictList("processLineType", "process_line_type", data ? data.processLineType : null, "工艺线路类型");
                    //状态
                    admin.getDictList("status", "sys_status", data ? data.status : null, "状态");

                    form.val('processLineTemplateForm', data);

                    // 表单提交事件
                    form.on('submit(processLineTemplateFormSubmit)', function (d) {
                        layer.load(2);
                        var isDeleted = $("form input[name='isDeleted']").prop("checked");
                        if (!isDeleted) {
                            d.field.isDeleted = false;
                        } else {
                            d.field.isDeleted = true;
                        }
                        admin.req(data ? 'enterprise/product/admin/processLineTemplate/update' : 'enterprise/product/admin/processLineTemplate/add', d.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('processLineTemplateTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, data ? 'PUT' : 'POST');
                        return false;
                    });
                }
            });
        }

        // 详情
        function showDetailModel(data) {
            admin.open({
                type: 1,
                area: '1100px',
                offset: '155px',
                title: '工艺线路-工序列表',
                content: $('#processLineTemplateRecordForm').html(),
                success: function () {
                    var processTab = table.render({
                        elem: '#processLineTemplateRecordTable',
                        url: config.base + 'enterprise/product/admin/processLineTemplateRecord/list',
                        page: true,
                        cellMinWidth: 100,
                        cols: [[
                            {field: 'processLineTemplateName', align: 'center', title: '工艺线路模板名称'}
                            , {field: 'processName', align: 'center', title: '工序名称'}
                            , {field: 'createTime', align: 'center', title: '创建时间'}
                        ]],
                        done: function (res, curr, count) {
                        }
                    });
                }
            });
        }

        // 工序管理
        function showProcessModel(data) {
            templateId = data.id;
            processOp = admin.open({
                type: 1,
                area: ['1280px', '80%'],
                title: '工艺线路工序管理',
                content: $('#processForm').html(),
                success: function () {
                    var processTab = table.render({
                        elem: '#processTable',
                        url: config.base + 'enterprise/product/admin/processLineTemplate/listAndProcess?type=1&templateId=' + data.id,
                        cellMinWidth: 100,
                        page:false,
                        where:{
                            limit: 999
                        },
                        cols: [[
                            {
                                field: 'nodeCodes',
                                align: 'center',
                                title: '节点编码',
                            }
                            , {field: 'nodeNames', align: 'center', title: '节点名称'}
                            , {field: 'nodeTypesName', align: 'center', title: '节点类型'}
                            , {field: 'processNatureName', align: 'center', title: '工序性质'}
                            , {
                                field: 'qualityIf', align: 'center', title: '是否委外', templet: function (d) {
                                    return d.qualityIf === '0' ? '是' : '否';
                                }
                            }
                            , {field: 'qualityRateName', align: 'center', title: '检验频率'}
                            , {
                                field: 'processWarehouseIf',
                                align: 'center',
                                title: '创建工序仓',
                                templet: function (d) {
                                    return d.qualityIf === '0' ? '是' : '否';
                                }
                            },
                            {
                                title: "排序",
                                align: 'center',
                                field: 'sortNumber',
                                edit: 'text',
                                width: '9%'
                            },
                            {field: 'createTime', align: 'center', title: '创建时间', width: 180}
                            , {
                                align: 'center',
                                toolbar: '#processTemTableBar',
                                title: '操作',
                                fixed: 'right'
                            }
                        ]],

                        done: function (res, curr, count) {
                            let menuButton = config.getMenuButton(location.hash);
                            if (menuButton.indexOf("搜索") == -1) {
                                $('.layui-form.toolbar').remove();
                            }
                            if (menuButton.indexOf("修改") == -1) {
                                $("[lay-event='edit']").remove();
                            }
                            if (menuButton.indexOf("删除") == -1) {
                                $("[lay-event='del']").remove();
                            }
                        }
                    });


                    admin.getDictList("processType", "process_node_type", null, "工序类型");
                    admin.getDictList("processNature", "process_nature", null, "工序性质");

                    $("#addProcessTemplate").click(function () {
                        admin.putTempData("processTemplateDataId", data.id);
                        let title = "添加工序节点";
                        let formIndex = admin.formOpen({
                            type: 1,
                            area: ['1230px','78%'],
                            offset: '80px',
                            style: 'font-size: 20px;',
                            title: title,
                            path: 'components/product/processLineTemplate_check.html',
                            finish: function () {
                                table.reload('processTab', {where: data.field});
                                layer.close(formIndex);
                            }
                        });
                    });

                    table.on('tool(processTable)', function (obj) {
                        let data = obj.data;
                        if (obj.event === 'delete') { //删除
                            deleteInfoById(data);
                        }
                    });


                    //表格修改事件
                    table.on('edit(processTable)', function (obj) {
                        let info = {};
                        // 假设我们要根据username字段的变化来更新email字段
                        if (obj.field === 'sortNumber') {
                            //Long processId, Long templateId, Integer order
                            info.processId = obj.data.id;
                            info.templateId = templateId;
                            info.sorted = obj.data.sortNumber;
                            //开始修改排序
                            admin.req('enterprise/product/admin/processLineTemplateRecord/updateOrder',info, function (res) {
                                layer.closeAll('loading');
                                if (res.code == 200) {
                                    processTab.reload({});
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'PUT');
                        }
                    });

                    function deleteInfoById(info){
                        let templateId = data.id;
                        let processId = info.id;
                        let params = {};
                        params.processLineTemplateId = templateId;
                        params.processId = processId;
                        layer.confirm('确定要删除模板绑定的工序信息吗？', {
                            offset: '65px',
                            skin: 'layui-layer-admin'
                        }, function (i) {
                            layer.close(i);
                            layer.load(2);
                            admin.req('enterprise/product/admin/processLineTemplate/deleteTempForProcess',params, function (res) {
                                layer.closeAll('loading');
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    processTab.reload({});
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'DELETE');
                        });
                    }

                    form.on('submit(processSearchBtn)', function (data) {
                        processTab.reload({where: data.field}, 'data');
                    });

                    // 重置搜索
                    form.on('submit(processResets)', data => {
                        $(".lay-header").find('select').val("");
                        $(".lay-header").find('input').val("");
                        let field = data.field;
                        for (let key in field) {
                            field[key] = ''
                        }
                        processTab.reload({where: field, page: {curr: 1}}, 'data');
                    });
                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprise/product/admin/processLineTemplate/delete/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        // 导出excel
        $('#processLineTemplateBtnExport').click(function () {
            var checkRows = table.checkStatus('processLineTemplateTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });

    });
</script>


<!-- 表格操作列 -->
<script type="text/html" id="processTemTableBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除工序</a>
</script>